<!-- src/views/OrdersView.vue -->
<template>
  <div class="orders-page">
    <!-- 顶部导航栏 -->
    <TopNav />

    <div class="orders-container">
      <h1>我的订单</h1>

      <div class="orders-list" v-if="sortedUserOrders.length > 0">
        <div 
          class="order-card" 
          v-for="order in sortedUserOrders" 
          :key="order.id"
          @click="viewOrderDetail(order)"
        >
          <div class="order-header">
            <div class="order-id">订单号：{{ order.id }}</div>
            <div class="order-date">{{ formatDate(order.date) }}</div>
          </div>
          
          <div class="order-items-preview">
            <div class="item" v-for="(item, index) in order.items.slice(0, 3)" :key="index">
              <img :src="item.gImage" :alt="item.gName" class="item-image" />
              <div class="item-details">
                <div class="item-name">{{ item.gName }}</div>
                <div class="item-price">￥{{ item.gPrice }} × {{ item.quantity }}</div>
              </div>
            </div>
            <div class="more-items" v-if="order.items.length > 3">
              ... 还有 {{ order.items.length - 3 }} 件商品
            </div>
          </div>
          
          <div class="order-footer">
            <div class="order-total">总计：￥{{ order.total.toFixed(2) }}</div>
            <div class="order-status" :class="order.status">
              {{ order.status === 'completed' ? '已完成' : '未完成' }}
            </div>
          </div>
        </div>
      </div>

      <div class="empty-orders" v-else>
        <p>暂无订单</p>
        <el-button type="primary" @click="$router.push('/home')">去购物</el-button>
      </div>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import TopNav from '@/components/TopNav.vue'

export default {
  name: 'OrdersView',
  components: {
    TopNav
  },
  computed: {
    ...mapGetters(['getUserInfo', 'getOrders']),
    
    userInfo() {
      return this.getUserInfo || {}
    },
    
    // 当前用户的订单
    currentUserOrders() {
      if (!this.userInfo.username) return []
      return this.getOrders.filter(order => order.username === this.userInfo.username)
    },
    
    // 按时间排序后的订单（最新的在最上面）
    sortedUserOrders() {
      return [...this.currentUserOrders].sort((a, b) => {
        return new Date(b.date) - new Date(a.date)
      })
    }
  },
  methods: {
    formatDate(date) {
      if (!date) return ''
      return new Date(date).toLocaleDateString()
    },
    
    viewOrderDetail(order) {
      this.$store.commit('SET_CURRENT_ORDER', order)
      this.$router.push('/order')
    }
  }
}
</script>

<style scoped>
.orders-page {
  max-width: 1200px;
  margin: 60px auto;
  padding: 20px;
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  min-height: calc(100vh - 60px);
}

.orders-container {
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  padding: 30px;
}

.orders-container h1 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
  font-size: 24px;
}

.orders-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.order-card {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.3s;
}

.order-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transform: translateY(-2px);
}

.order-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
}

.order-id {
  font-weight: bold;
  color: #333;
}

.order-date {
  color: #666;
}

.order-items-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 15px;
}

.item {
  display: flex;
  gap: 10px;
  width: 100%;
}

.item-image {
  width: 60px;
  height: 60px;
  object-fit: contain;
  border-radius: 4px;
}

.item-details {
  flex: 1;
}

.item-name {
  font-size: 14px;
  color: #333;
  margin-bottom: 5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-price {
  font-size: 13px;
  color: #666;
}

.more-items {
  font-size: 13px;
  color: #999;
  align-self: center;
}

.order-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
  padding-top: 15px;
}

.order-total {
  font-weight: bold;
  color: #333;
}

.order-status {
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: bold;
}

.order-status.completed {
  background-color: #e8f5e9;
  color: #4caf50;
}

.order-status.pending {
  background-color: #fff3e0;
  color: #ff9800;
}

.empty-orders {
  text-align: center;
  padding: 50px 0;
}

.empty-orders p {
  font-size: 18px;
  color: #666;
  margin-bottom: 20px;
}

.el-button {
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 4px;
  transition: all 0.3s;
}

.el-button--primary {
  background-color: #4caf50;
  border-color: #4caf50;
}

.el-button--primary:hover {
  background-color: #3e8e41;
  border-color: #3e8e41;
}

@media (max-width: 768px) {
  .orders-page {
    padding: 10px;
    margin: 60px 10px;
  }
  
  .orders-container {
    padding: 20px 15px;
  }
  
  .order-header {
    flex-direction: column;
    gap: 5px;
  }
  
  .order-items-preview {
    flex-direction: column;
  }
}
</style>